<template>
    <div class="video">
       <div :style="`text-align:${options.textAlign || 'center'};font-size:${options.fontSize/2 ||12}px; line-height:${(options.fontSize/2- 0 + 8) ||20}px;font-family:${options.textFontFamily || 'Microsoft YaHei' };color:${options.textColor || '#666666'};background:${options.bgColor || '#FFFFFF'};margin-top:${options.paddingTop/2}px;margin-bottom:${options.paddingBottom/2}px`">
            <img :src="options.imageUrl" alt="">
            <div class="box_shadow" v-if='!options.imageUrl'>
                <div class="react_box"></div>
                <p>请在右侧添加视频内容</p>
            </div>
       </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{},
            show:true,
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    methods:{
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
            this.show = false;
            this.$nextTick(()=>{
                this.show = true;
            })
            // this.options.textContent  = this.options.textContent ? this.options.textContent.replace(/\s/g,'&nbsp') :"";
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
    }
}
</script>
<style lang="less" scoped>
    .video{
        width:100%;
        height:auto;
        min-height:30px;
        box-sizing: border-box;
        line-height:20px;
        word-break: break-word;
        overflow: hidden;
        min-height:100px;
        video{
            width:100%;
            height:200px;
        }
        img{
            width:100%;
            height:auto;
            display: inherit;
        }
        // line-height:100px;
    }
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            margin-bottom:19px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
        }
    }
</style>